import React, {useRef} from 'react';
import {Layout, Menu, Skeleton} from "antd";
import {useLocation, useNavigate} from "react-router-dom";
import LogFactory from "log/LogFactory";
import {useAppDispatch, useAppSelector} from "../../redux/hook";
import {fetchMenuTreeData} from "../../redux/reducer/navigateReducer";
import {MenuTreeData} from "type/SecurityMenu";
import {parseIcon} from "util/Icon";
import System from "global/System";

const {Sider } = Layout;
const log = LogFactory.getLog("NavigateSiderComponent") ;
const NavigateSiderComponent = () => {
    const navigate = useNavigate() ;
    const location = useLocation();
    const dispatch = useAppDispatch();
    const navigateStata = useAppSelector(state => state.navigate) ;
    const setSelectKeys = (): string[] => {
        let reg = new RegExp('^\/[a-z]+\/[a-z]+\/[a-z]+', 'i');
        let match = reg.exec(location.pathname);
        if (match) {
            return [match[0]] ;
        }
        return [location.pathname] ;
    } ;

    const lazyStatus = useRef<{
        isLoaded: boolean,
        openKeys: string[],
        menuTreeData: MenuTreeData[]
    }>({
        isLoaded: false,
        openKeys: [],
        menuTreeData: []
    }) ;
    // log.info("导航侧边菜单状态信息",navigateStata.status) ;
    if (navigateStata.status === 0){
        dispatch(fetchMenuTreeData()) ;
    }

    // 如果菜单的数据状态为3表示加载菜单成功,此时如果数据加载状态为false怎装载菜单数据
    if (navigateStata.status === 3 && !lazyStatus.current.isLoaded){
        // log.debug("加载菜并处理单树数据",navigateStata.menuTreeData) ;
        lazyStatus.current.isLoaded = true ;
        lazyStatus.current.menuTreeData = parseIcon(navigateStata.menuTreeData) ;
        lazyStatus.current.openKeys = ['/nav/admin','/nav/record'] ;
    }

    const getOpenKeys = () => {
       return System.getInstance().getUserConfig().expandMenuKey ;
    } ;

    return (
        <Sider
            style={{
                overflow: 'auto',
                height: '100vh',
                position: 'fixed',
                zIndex: 800,
                left: 0,
                top: 0,
                bottom: 0,
            }}
        >
            <Skeleton loading={!lazyStatus.current.isLoaded} active className={'gvp-sider-skeleton'} title={true} paragraph={{rows: 10}} >
                <Menu<any>
                    mode="inline"
                    theme={"dark"}
                    // defaultSelectedKeys={[location.pathname]}
                    selectedKeys={setSelectKeys()}
                    // defaultOpenKeys={lazyStatus.current.openKeys}
                    defaultOpenKeys={getOpenKeys()}
                    // openKeys={lazyStatus.current.openKeys}
                    style={{height: '100%', borderRight: 0,paddingTop: '64px'}}
                    items={lazyStatus.current.menuTreeData}
                    onClick={(e) => {
                        // log.debug("点击菜单",e) ;
                        navigate(e.key) ;
                    }}
                />
            </Skeleton>

        </Sider>
    );
};

export default NavigateSiderComponent;